"use strict";
import React from "react";
import styles from "./index.less";

/*
 * 组件注释
 * create by wuqiong
 * creation time 2021/07/30
 * 步骤组件
 * */
/* const steps = [
  { value: '1', title: '超级管理员初审' },
  { value: '2', title: '中心领导审批' },
  { value: '3', title: '专家审批' },
] */
const Index = ({
  steps = [],
  current = -1,
  style = {},
  handleStepClick,
  disabledLight = [],
  fieldNames = {},
}) => {
  const value = fieldNames.value || "value";
  const title = fieldNames.title || "title";

  return (
    <div
      className={`progress ${styles.progress}`}
      style={{ width: steps.length * 150, ...style }}
    >
      {steps.map((step, index) => (
        <div
          key={index}
          style={{
            ...(handleStepClick && typeof handleStepClick === "function"
              ? { cursor: pointer }
              : {}),
          }}
          onClick={() =>
            handleStepClick &&
            typeof handleStepClick === "function" &&
            handleStepClick(step, index)
          }
          className={`${styles.steps} ${
            current === index && styles.stepsCurrent
          } ${
            current > index &&
            !disabledLight.includes(index) &&
            styles.stepsDone
          }`}
        >
          <div className={styles.stepIcon}>{step[value]}</div>
          <p className={styles.stepTitle}>{step[title]}</p>
        </div>
      ))}
    </div>
  );
};
export default Index;
